


import useInitAction from '@/hooks/useInitAction';
import { Popup, Checkbox, CheckboxGroup } from '@antmjs/vantui'
import { View, Text,Image } from '@tarojs/components';
import { forwardRef, useEffect, useState } from 'react';
import checkedIcon from '@/assets/Images/service-no-checked.png'
import hasCheckedIcon from '@/assets/Images/service-checked.png'
import { IShopServiceTypeData } from '@/typing';

import Taro from '@tarojs/taro';
import { STORE_KEY } from '@/common/config';
interface IAddSerivceDialog {
    show: boolean;
    serviceTypeList: Array<IShopServiceTypeData>
    handlePopStatus: (status) => void;
    handleConfirm: (idList: number[]) => void;
}

const AddSerivceDialog: React.FC<IAddSerivceDialog> = forwardRef((props, ref) => {
    const { serviceTypeList, show, handlePopStatus, handleConfirm } = props
    const { bottomSafeHeight } = useInitAction();
    const [idList, setIdList] = useState<number[]>([])

    const handleClickService = (item) => {
        if (idList.includes(item)) {
            idList.splice(idList.indexOf(item), 1)
        } else {
            idList.push(item)
        }
       
        setIdList([...idList])
    }
    const handleConfirmComplete = () => {
        console.log(idList)
        handleConfirm(idList)
      

    }
    const handleInitIdList = () => {
        const serviceTypeList = JSON.parse(Taro.getStorageSync(STORE_KEY.ADD_SERVICE_TYPE) || '[]')
      
        setIdList(serviceTypeList)
    }
    useEffect(() => {
        if (show) {
            handleInitIdList()
        }
    }, [show])

    return (
        <>
            <Popup show={show} position="bottom" closeOnClickOverlay={true} onClickOverlay={() => handlePopStatus(false)} overlay={true} safeAreaInsetBottom={false} style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '90rpx', borderTopRightRadius: '12px', borderTopLeftRadius: '12px' }}>
                <View className='pt-22px px-44px box-border'>
                    <CheckboxGroup value={idList} onChange={(e) => {
                        setIdList([...e.detail])
                    }}>{
                            serviceTypeList.map((item) => {
                                return <View className='mt-46px'>
                                    <View className='flex items-center justify-between' onClick={() => handleClickService(item.id)}>
                                        <Text className='text-#161618 text-36px font-bold'>{item.name}</Text>

                                        <Checkbox
                                            name={item.id}
                                            renderIcon={
                                                <Image
                                                    style={{ width: '23px', height: '23px' }}
                                                    src={
                                                        idList.includes(item.id)
                                                            ? hasCheckedIcon
                                                            : checkedIcon
                                                    }
                                                />
                                            }

                                        ></Checkbox>
                                    </View>
                                    <View className='mt-26px text-28px text-#555555 leading-46px '>{item.content}</View>
                                </View>
                            })
                        }

                    </CheckboxGroup>
                    <View className='mt-52px w-374px h-92px flex items-center justify-center bg-#8232E8 text-#fff text-28px font-medium mx-auto' onClick={handleConfirmComplete}>完成</View>
                </View>
            </Popup>
        </>
    )
})

export default AddSerivceDialog